<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>示例简单的购物车</title>
  <link rel="stylesheet" type="text/css" href="../style.css">
</head>

<body>
  <div id="app" v-cloak>
    <template v-if="list.length">
      <table>
        <thead>
          <tr>
            <th></th>
            <th>
              <input type="checkbox" :checked="selectAll" @click="handleSelectAll"> 全选
            </th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="(item, index) in list" :key="index">
            <tr>
              <td>{{ index + 1 }}</td>
              <td>
                <input type="checkbox" :checked="item.select" @click="handlechangeSel(index)" />
              </td>
              <td>{{ item.name }}</td>
              <td>{{ item.price }}</td>
              <td>
                <button @click="handleReduce(index)" :disabled="item.count === 1">-</button>
                {{ item.count }}
                <button @click="handleAdd(index)">+</button>
              </td>
              <td>
                <button @click="handleRemove(index)">移除</button>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
      <div>总共购买: {{ totalMound }} 件商品，总价: ￥ {{ totalPrice }}</div>
    </template>
    <div v-else>购物车为空</div>
    <hr>
    <div>
      Debug Info
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <span v-for="(value, key, index) in item">{{index}} - {{key}} : {{value}}
            <br>
          </span>
        </li>
      </ul>
    </div>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script src="index.js"></script>
</body>

</html>